<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>个人动态</title>
		<link rel="stylesheet" href="css/index.css" />
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/dynamic_content.css" />
		<link rel="stylesheet" href="css/dynamic.css" />
	</head>
	<body>
		<!--nav 可复用-->
		<div class="nav">
			<p onclick="javascript:history.back(-1);"><img src="images/箭头2.png" alt="" /></p>
			<p>晴儿</p>
			<img src="images/图层-17.png" alt="" />
		</div>
		<!--dynamic_content 内容-->
		<div class="dynamic_message">
			<img src="images/附近_03.png" alt="" />
			<p>晴儿</p>
			<img class="xiala" src="images/动态_38.png" alt="" />
			<p>28岁 | 168cm | 浙江金华</p>
			<div class="dynamic_attestation">
				<span>
					已认证
				</span>
				<span>
					已认证
				</span>
				<span>
					已认证
				</span>
			</div>
			<hr style="border: none;height: 1px;border-top: 1px solid #eee;clear: both;"/>
			<div class="dynamic_photo" onclick="javascript:window.location.href='album.html'">
				<img src="images/个人动态_03.png" alt="" />
				<img src="images/个人动态_03_03.png" alt="" />
				<img src="images/个人动态_03_05.png" alt="" />
				<img src="images/组-1.png" alt="" />
				<p>相册<img src="images/右箭头-拷贝.png" alt="" /></p>
			</div>
		</div>
		<div class="dynamic_content">
			<div class="dynamic_content_title">
				<p class="actice">择偶意向</p>
				<p>个人信息</p>
				<p>个人动态</p>
			</div>
			<div class="mate_content dynamic">
				<p class="mate_content_line1">
					内心独白<span>1/1</span>
				</p>
				<p class="mate_content_line2">
					内心独白内心独白内心独白内心独白内心独白内心独白内心独白内心独白内心独白内心独白
				</p>
				<p class="mate_content_line1">
					择偶信息<span>6/8</span>
				</p>
				<div class="mate_content_line3">
					<p>年龄</p>
					<p>28岁</p>
				</div>
				<div class="mate_content_line3">
					<p>身高</p>
					<p>160~168cm</p>
				</div>
				<div class="mate_content_line3">
					<p>籍贯</p>
					<p>宁夏银川</p>
				</div>
				<div class="mate_content_line3">
					<p>学历</p>
					<p>本科</p>
				</div>
				<div class="mate_content_line3">
					<p>信仰</p>
					<p class="nochose">未选择</p>
				</div>
				<div class="mate_content_line3">
					<p>月收入</p>
					<p>3000~6000元</p>
				</div>
				<div class="mate_content_line3">
					<p>居住地</p>
					<p>浙江义乌</p>
				</div>
				<div class="mate_content_line3">
					<p>交往目的</p>
					<p>征婚</p>
				</div>
				<div class="mate_content_line3">
					<p>购房情况</p>
					<p class="nochose">未选择</p>
				</div>
				<div class="mate_content_line3">
					<p>婚姻状况</p>
					<p>未婚</p>
				</div>
				<div class="mate_content_line3">
					<p>希望对方是否有身份认证</p>
					<p>是</p>
				</div>
			</div>
			<div class="message_content dynamic">
				<p class="message_content_line1">
					基本资料<span>1/1</span>
				</p>
				<div class="message_content_line3">
					<p>我的ID</p>
					<p>10000</p>
				</div>
				<div class="message_content_line3">
					<p>昵称</p>
					<p>晴儿</p>
				</div>
				<div class="message_content_line3">
					<p>身高</p>
					<p>168cm</p>
				</div>
				<div class="message_content_line3">
					<p>体重</p>
					<p>45kg</p>
				</div>
				<div class="message_content_line3">
					<p>常驻地</p>
					<p>浙江义乌</p>
				</div>
				<div class="message_content_line3">
					<p>籍贯</p>
					<p class="nochose">未选择</p>
				</div>
				<div class="message_content_line3">
					<p>民族</p>
					<p>回族</p>
				</div>
				<div class="message_content_line3">
					<p>是否信仰伊斯兰教</p>
					<p>是</p>
				</div>
				<p class="message_content_line1" style="margin-top: 30px;">
					详细资料<span>6/8</span>
				</p>
				<div class="message_content_line3">
					<p>学历</p>
					<p>大专</p>
				</div>
				<div class="message_content_line3">
					<p>毕业院校</p>
					<p>北京大学</p>
				</div>
				<div class="message_content_line3">
					<p>职业</p>
					<p>自由职业者</p>
				</div>
				<div class="message_content_line3">
					<p>月收入</p>
					<p>10000元</p>
				</div>
				<div class="message_content_line3">
					<p>婚姻状况</p>
					<p>未婚</p>
				</div>
				<div class="message_content_line3">
					<p>住房情况</p>
					<p class="nochose">未选择</p>
				</div>
				<div class="message_content_line3">
					<p>买车情况</p>
					<p class="nochose">未选择</p>
				</div>
				<div class="message_content_line3">
					<p>何时结婚</p>
					<p>明年</p>
				</div>
			</div>
			<div class="dynamic_line1 dynamic">
				<img src="images/个人动态_03.png" alt="" />
				<p>晴儿</p>
				<p>实名</p>
				<p>30分钟前</p>
				<div class="dymamic_spangroup">
					<span>
						<img src="images/动态_16.png"/>
						23岁
					</span>
					<span>163cm</span>
					<span>本科</span>
					<span>回族</span>
					<span>征婚</span>
				</div>
				<p>人生最大的敌人是自己，人生最大的失败是自大，人生最大的愚蠢是欺骗，人生最大的可怜是嫉妒。</p>
				<div class="dynamic_imgroup">
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
					<img src="images/动态_21.png" alt="" />
				</div>
				<p>
					<i><img src="images/动态_25.png" alt="" /></i>
					<span>杭州</span>
				</p>
				<div class="dynamic_icongroup">
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_38.png" alt="" /></i>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_35.png" alt="" /></i>
						<span>3</span>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_32.png" alt="" /></i>
						<span>20</span>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_30.png" alt="" /></i>
						<span>赏</span>
					</div>
					<div class="dynamic_icongroup_line1">
						<i><img src="images/动态_28.png" alt="" /></i>
						<span>220</span>
					</div>
				</div>
				<div id="triangle-up"></div>
				<div class="dynamic_dialog">
					<p>张三 &nbsp;: <span>你好</span></p>
					<p>晴儿&nbsp;<span>回复&nbsp;</span>张三&nbsp;: <span>你好</span></p>
				</div>
			</div>
		</div>
		<div class="dynamic_bottom">
			<p class="dynamic_bottom_left" onclick="javascript:window.location.href='chat.html'">
				聊天
			</p>
			<p class="dynamic_bottom_right">
				关注
			</p>
		</div>
		<div class="dynamic_dialog2">
			<form action="">
				<div class="dynamic_dialog_line1">
					<p>拉黑</p>
					<p onclick="javascript:window.location.href='report.html'">举报</p>
				</div>
				<div class="dynamic_dialog_line2">
					<p class="cancel">取消</p>
				</div>
			</form>
		</div>
		<script>
			$(function(){
				$('.dynamic_content_title p').click(function(){
					$(this).addClass('actice').siblings('p').removeClass('actice');
					var c = $(this).index();
					if(c==0){
						$('.mate_content').show().siblings('.dynamic').hide();
					}else if(c==1){
						$('.message_content').show().siblings('.dynamic').hide();
					}else{
						$('.dynamic_line1').show().siblings('.dynamic').hide();
					}
				})
				$('.xiala').click(function(){
					$('.dynamic_dialog2').show();
				})
				$('.cancel').click(function(){
					$('.dynamic_dialog2').hide();
				})
				var dialog = document.querySelector('.dynamic_dialog2');
				var form = document.querySelector('.dynamic_dialog form');
				dialog.addEventListener('click',function(e){
					if(e.target.classList[0]=='dynamic_dialog2'){
						dialog.style.display='none';
					}
				})
			})
		</script>
	</body>
</html>
